<template>
  <view>
    <!-- 顶部用户信息 -->
    <view class="topUserInfo">
      <view class="bgImg">
        <image src="/static/my/myBg@3x.png" mode="aspectFit"></image>
      </view>
      <view class="setImg" @click="setUserInfo">
        <image src="/static/my/setIcon@3x.png" mode="aspectFit"></image>
      </view>
      <view class="userBox">
        <view class="leftBox">
          <view class="headImg">
            <image src="/static/my/headImg@3x.png" mode="aspectFit"></image>
          </view>
          <view class="addImg" @click="editDeadImg">
            <image src="/static/my/bianjiIcon@3x.png" mode="aspectFit"></image>
          </view>
        </view>
        <view class="infoBox">
          <view class="nameBox">
            <text>Gesang</text>
            <image
              src="/static/my/huizhangIcon@3x.png"
              mode="aspectFit"
            ></image>
          </view>
          <view class="IPBox">
            <text>IP:上海</text>
            <text>摇爪号:1006897523410</text>
          </view>
          <view class="numBox">
            <text class="numBoxItem">
              <text class="f26">78</text>
              <text class="f16">粉丝</text>
            </text>
            <text class="numBoxItem">
              <text class="f26">355</text>
              <text class="f16">关注</text>
            </text>
            <text class="numBoxItem">
              <text class="f26">257</text>
              <text class="f16">获赞</text>
            </text>
          </view>
        </view>
      </view>
      <view class="signBox" @click="editUserSign">
        <image src="/static/my/editSign@3x.png" mode="aspectFit"></image>
      </view>
    </view>
    <!-- 切换tabs -->
    <view class="switchTabs">
      <view
        v-for="(item, index) in tabsList"
        :key="index"
        :class="['tabsBox', { actTabsBox: activeTabs === item.value }]"
        @click="switchTabs(item.value)"
      >
        {{ item.name }}
      </view>
    </view>
    <view class="">
      <!-- 宠物档案 -->
      <petProfile v-if="activeTabs == 1"></petProfile>
      <!-- 发布 -->
      <shopList
        style="width: 92vw; margin: 0 auto"
        v-if="activeTabs == 2"
      ></shopList>
      <!-- 收藏 -->
      <collect v-if="activeTabs == 3"></collect>
      <likeList v-if="activeTabs == 4"></likeList>
    </view>
  </view>
</template>

<script>
import petProfile from "./my_compoments/petProfile.vue";
import shopList from "./my_compoments/shopList.vue";
import likeList from "./my_compoments/likeList.vue";
import collect from "./my_compoments/collect.vue";
import commonMixin from "@/mixin/commonMinxin";
export default {
  mixins: [commonMixin],
  components: { petProfile, shopList, likeList, collect },
  data() {
    return {
      activeTabs: 1,
      tabsList: [
        { name: "宠物档案", value: 1 },
        { name: "发布", value: 2 },
        { name: "收藏", value: 3 },
        { name: "赞过", value: 4 },
      ],
    };
  },
  methods: {
    setUserInfo() {
      console.log("设置用户信息");
    },
    editDeadImg() {
      console.log("切换头像");
    },
    editUserSign() {
      console.log("编辑用户签名");
    },
    switchTabs(value) {
      // 切换按钮
      this.activeTabs = value;
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  background-color: #f8f8f8;
  padding-bottom: 40rpx;
}

.f26 {
  font-size: 26rpx;
  font-weight: 800;
}

.f16 {
  font-size: 16rpx;
  font-weight: 500;
}

.numBoxItem {
  margin-right: 48rpx;
  display: flex;
  align-items: center;
}

.bgImg {
  width: 100%;
  height: 392rpx;
  z-index: -1;
}

.bgImg image {
  width: 100%;
  height: 100%;
}

.setImg {
  width: 48rpx;
  height: 48rpx;
  position: absolute;
  top: 34rpx;
  right: 28rpx;
}

.setImg image {
  width: 100%;
  height: 100%;
}

.userBox {
  display: flex;
  align-items: center;
  position: absolute;
  top: 128rpx;
  left: 28rpx;
}

.leftBox {
}

.headImg {
  position: relative;
}

.headImg image {
  width: 156rpx;
  height: 156rpx;
}

.addImg {
  position: absolute;
  bottom: 0%;
  left: 114rpx;
}

.addImg image {
  width: 40rpx;
  height: 40rpx;
}

.infoBox {
  margin-left: 32rpx;
}

.nameBox text {
  font-weight: 800;
  font-size: 40rpx;
  color: #303030;
  text-align: left;
}

.nameBox image {
  width: 28rpx;
  height: 28rpx;
  margin-left: 16rpx;
}

.IPBox {
  font-weight: 500;
  font-size: 20rpx;
  color: #303030;
}

.numBox {
  color: #303030;
  display: flex;
  align-items: center;
}

.signBox {
  width: 260rpx;
  height: 28rpx;
  position: absolute;
  top: 332rpx;
  left: 28rpx;
}

.signBox image {
  width: 100%;
  height: 100%;
}

.switchTabs {
  margin: 32rpx 28rpx 32rpx;
  display: flex;
  align-items: center;
}

.tabsBox {
  white-space: nowrap;
  background-color: #ffffff;
  font-weight: 400;
  font-size: 28rpx;
  color: #bfbfbf;
  text-align: center;
  height: 48rpx;
  line-height: 48rpx;
  border-radius: 48rpx;
  padding: 0 28rpx;
  margin-right: 16rpx;
}

.actTabsBox {
  white-space: nowrap;
  background-color: #d9f700;
  font-weight: bold;
  font-size: 28rpx;
  color: #303030;
  text-align: center;
  height: 48rpx;
  line-height: 48rpx;
  border-radius: 48rpx;
  margin-right: 16rpx;
  padding: 0 90rpx;
}
</style>
